<!-- components/ContentHeader.vue -->
<script setup>
const { data: navigation } = await useAsyncData("navigation", () =>
  fetchContentNavigation()
);
console.log("Navigation Data:", navigation.value); // 查看控制台输出
// 提取顶级目录
const categories = computed(() => {
  const paths = [
    ...new Set(navigation.value.map((item) => item._path.split("/")[0])),
  ];
  return paths.map((path) => ({
    path: `/${path}`,
    title: path.charAt(0).toUpperCase() + path.slice(1), // 首字母大写
  }));
});
console.log(categories.value);
</script>

<template>
  <header class="header">
    <nav class="nav-container">
      <NuxtLink to="/" class="logo"> Your Logo </NuxtLink>
      <div class="nav-links">
        <NuxtLink
          v-for="category in categories"
          :key="category.path"
          :to="category.path"
          class="nav-link"
          active-class="active-link"
        >
          {{ category.title }}
        </NuxtLink>
      </div>
    </nav>
  </header>
</template>

<style scoped>
.header {
  @apply bg-white shadow-sm;
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  height: 64px;
  display: flex;
  align-items: center;
}

.logo {
  @apply text-xl font-bold text-gray-900;
  margin-right: 4rem;
}

.nav-links {
  @apply flex space-x-8;
}

.nav-link {
  @apply text-gray-500 hover:text-blue-600 px-1 py-2 text-sm font-medium;
  transition: color 0.2s;
}

.active-link {
  @apply text-blue-600 border-b-2 border-blue-600;
}
</style>
